<template>
    <div>
        <div class="container">
            <el-button type="warning" :icon="CirclePlusFilled" style="margin-bottom: 10px" @click="visibleOne = true">新增银行</el-button>
            <el-button type="danger" :icon="CirclePlusFilled" style="margin-bottom: 10px" @click="clickTwo">新增二级网点</el-button>


        <el-table
          :data="tableData"
          :preserve-expanded-content="true"
          style="height: calc(100vh - 300px);"
        >
          <el-table-column label="银行" prop="level1" />
          <el-table-column label="二级网点" prop="level2" />
          <el-table-column label="最近录入时间" prop="updateTime" />
          <el-table-column label="操作" width="200px">
                <template #default="{ row: flowRow }">
                        <el-button type="primary" size="small" :icon="Edit" @click="handleEdit(flowRow)">
                            编辑
                        </el-button>
                        <el-button type="danger" size="small" :icon="Delete" @click="handleDelete(flowRow)">
                            删除
                        </el-button>
                </template>
            </el-table-column>
        </el-table>
          <el-pagination v-if="hasPagination" :page-size="page.size" :background="false"
                         :page-sizes="[10, 20, 50, 100]"  @size-change="handleSizeChange"
                         layout="sizes,prev, pager, next" :total="page.total" @current-change="handleCurrentChange" style="margin-top: 10px" />
        </div>
        <el-dialog :title="'新增银行'" v-model="visibleOne" width="700px" destroy-on-close
            :close-on-click-modal="false" @close="closeOneDialog">
            <TableEdit :form-data="oneAreaData" :options="oneOptions" :edit="isEdit" :update="saveOneArea" />
        </el-dialog>
        <el-dialog :title="'新增二级网点'" v-model="visibleTwo" width="700px" destroy-on-close
            :close-on-click-modal="false" @close="closeTwoDialog">
            <TableEdit ref="tableEditRef" :form-data="twoAreaData" :options="twoOptions" :edit="isEdit" :update="updateFullData" />
        </el-dialog>



        <el-dialog :title="'编辑'" v-model="visibleTwo" width="700px" destroy-on-close
            :close-on-click-modal="false" @close="closeTwoDialog">
            <TableEdit :form-data="rowData" :options="twoOptions" :edit="isEdit" :update="updateFullData" />
        </el-dialog>

    </div>
</template>

<script setup lang="ts" name="finance-management">

import { ref, reactive,onMounted,watch,nextTick } from 'vue';


import { ElMessage, ElMessageBox } from 'element-plus';
import { CirclePlusFilled } from '@element-plus/icons-vue';
import { fetchBankLeve1, fetchBankLeve2,saveBankLeve1,saveBankLeve2,delBankLeve1,delBankLeve2 } from '@/api';



import TableDetail from '@/components/table-detail.vue';
import { FormOption, FormOptionList } from '@/types/form-option';
import { Delete, Edit, View, Refresh } from '@element-plus/icons-vue';

const hasPagination = ref(true);
const visibleOne = ref(false);
const visibleTwo = ref(false);
const visibleFull = ref(false);

const isEdit = ref(false);
const rowData = ref({});


const expandedRowKeys = ref([]); // 用于控制展开行的数组


// 处理展开事件，更新 flowsArray 和 row.balance
const handleExpandChange = (row, expandedRows) => {
    expandedRowKeys.value = expandedRows.map(r => r.id); // 更新展开行的 keys


};

const handleCurrentChange = (val: number) => {
    page.index = val;
    page.currentPage = val;
    getData();
};

const handleSizeChange = (val: number) => {
    page.size = val;
    page.index = 1;
    page.currentPage = 1;
    getData();
};


const clickTwo = async () => {
    const res = await fetchBankLeve1(1,100);

    twoOptions.value.list[0].opts = res.data.content.map(item => ({
        label: item.level1,
        value: item.level1
    }));
    visibleTwo.value = true;

}


const page = reactive({
    total: 0,
    index: 1,
    size: 50,
    hasPagination: true,
    layout: 'prev, pager, next,total',
    currentPage: 1,
    pageCount: 1
})
const tableData = ref<[]>();
const getData = async () => {
    const res = await fetchBankLeve2(page.index, page.size);
    tableData.value = res.data.content;
    page.index = res.data.number + 1;
    page.total = res.data.totalElements;
    page.size = res.data.size;
    page.pageCount = res.data.totalPages;
};

getData();


// 新增银行
let oneAreaData = ref({});
let oneOptions = ref<FormOption>({
    labelWidth: '100px',
    span: 12,
    list: [
        { type: 'input', prop: 'level1', label: '银行' , required: true },

    ]
})

// 新增二级网点
let twoAreaData = ref({});
let twoOptions = ref<FormOption>({
    labelWidth: '100px',
    span: 12,
    list: [
        { type: 'select', prop: 'level1', label: '银行' , required: true  },
        { type: 'input', prop: 'level2', label: '二级网点' , required: true  },

    ]
})


const handleEdit = (row) => {
    isEdit.value = true;
    visibleTwo.value = true;
    rowData.value = { ...row };
    
};

const closeFullDialog = () => {
    visibleFull.value = false;
    isEdit.value = false;
};

const updateFullData = async (data) => {

    await saveBankLeve2(data);
    
    if (!isEdit.value) {
        ElMessage.success('新增成功');
    } else {
        ElMessage.success('编辑成功');
    }
    closeTwoDialog();
    getData();
};

const saveOneArea = async (data) => {
    await saveBankLeve1(data);
    ElMessage.success('新增成功');
    closeOneDialog();
    getData();
    
}


const closeOneDialog = () => {
    visibleOne.value = false;
    isEdit.value = false;
}

const closeTwoDialog = () => {
    visibleTwo.value = false;
    isEdit.value = false;
}


// 查看详情弹窗相关
const visibleDetails = ref(false);
const viewData = ref({
    row: {},
    list: []
});


// 删除记录

const handleDelete = (row) => {
    ElMessageBox.confirm('确定要删除吗？', '提示', {
        type: 'warning'
    })
        .then(async () => {
            await delBankLeve2(row.id);
            await getData();
            ElMessage.success('删除成功');
        })
        .catch(() => { });
    
};


</script>

<style>

.container {
    min-height: calc(100vh - 150px) !important; 
    box-sizing: border-box;
    background: #fff;
    padding: 20px;
    overflow: auto;
}

.el-table.no-header-bg th {
    height: 40px;
    background-color: #fff !important;
    font-weight: normal;
    text-align: center !important;

}
.el-table th.el-table__cell  {
    text-align: center !important;
}

.el-table td.el-table__cell{
    text-align: center !important;
}

</style>